<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>任务</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<style>
		header {height: 44px;background: #ffffff;display: flex;align-items: center;
			position: fixed;left: 0;right: 0;top: 0;padding: 0 15px;justify-content: space-between;}
		.header{width: 100%;}
		.aui-pull-left{float: left;}
		.aui-pull-right{float: right;}
		.aui-margin-l-10{margin-left: 10px;}
		.aui-margin-r-10{margin-right: 10px;}
		.content {margin: 0px 15px;background: #ffffff;border-radius: 10px;overflow: hidden;}
		.content .qiandaobox {width: 100%;height:260px;background: #fff;}
		.qiandaobox1{background-image:url(../../image/task/tasktopbg.png);background-size: 100% 100%;width:100%;
			height:160px;color: #fff;display: flex;flex-wrap: nowrap; justify-content:space-around;text-align: center;
			padding-top: 30px;box-sizing: border-box;}
		.qiandaobox1 div p:nth-child(2){padding: 5px 0;}
		.mingxibtn{width:80px;height:26px;line-height:26px; background:rgba(255,255,255,0.2);
      border-radius:13px;font-size:14px;color:#fff;font-weight: normal;}
		.qiandaobox2{margin:0 5px;padding:10px 5px;box-sizing: border-box;background: #fff;border-radius:5px ;position: relative;top:-30px;}
		.qiandaobtnbox{display: flex;flex-wrap: nowrap;justify-content:space-between;padding-bottom:15px;}
		.qiandaobtnbox div p:nth-child(1){font-size: 16px;color: #333;padding-left: 5px;}
		.qiandaobtnbox div p:nth-child(2){font-size: 14px;color: #666;padding-left: 5px;padding-top: 2px;}
		.qiandao{display: flex;flex-wrap: nowrap;justify-content:space-around;}
		.jinbiniconimg{display: block;width: 28px;height: 28px;background: url(../../image/task/jinbinimg.png);
			background-size: 100% 100%;line-height:28px;text-align: center;font-size:10px;color:#bf790a;font-weight: bold;margin:0 auto;}
		.gift{width:28px;height:28px;display: block;margin:0 auto;}
		.qiandao div p{padding-top: 5px;font-size: 12px;}
		.btnFun{display: flex;align-items:center;margin-right: 5px;}
		.btnFun p{width:80px;height: 30px;line-height: 30px;text-align: center;background-image:linear-gradient(#ff8375, #ff1209);
		border-radius: 15px;color:#ffffff;}
		ul li {padding: 15px 20px 15px 6px;display: flex;align-items: center;justify-content: space-between;}
		li>img {flex: none;height: 60px;width: 60px;}
		li .title {	flex: auto;	margin: 0px 10px 0px 5px;}
		li .title :first-child {font-weight: bold;	font-size: 16px;
			color: #333333;margin-bottom: 5px;}
		li .title :last-child {color: #999999;}
		li .money {flex: none;color: #ff3a24;font-size: 24px;}
		li .money span:first-child {font-size: 12px;margin-right: 5px;}
		.button {height: 50px;line-height: 50px;text-align: center;	border-radius: 100px;
			font-size: 16px;margin: 20px 15px 0;background-image: linear-gradient(45deg,#ff3a24 0%,#ff5340 100%);
			color: #ffffff;font-weight: bold;	}
	</style>
</head>

<body>
	<!-- 顶部导航展示 -->
	<header class="aui-bar aui-bar-nav aui-bar-theme" id="aui-header">
			<div class="header" id="aui-header-task">
					<a class="aui-pull-left aui-btn">
							<span class="aui-margin-l-10 aui-font-size-16">任务</span>
					</a>
					<a class="aui-pull-right aui-btn" tapmode onclick="explain()">
							<span class="aui-margin-r-10 aui-font-size-16">规则</span>
					</a>
			</div>
	</header>
	<div class="content">
		<div class="qiandaobox">
				<!-- 收益统计盒子 -->
				<div class="qiandaobox1">
						<div>
								<p>累计金币收益</p>
								<p class="cumulative">0.00</p>
								<span class="mingxibtn" tapmode onclick="mingxifun()">兑换明细</span>
						</div>
						<div>
								<p>当前金币余额</p>
								<p class="current">0.00</p>
								<span class="mingxibtn"  tapmode onclick="duihuanfun()">我要兑换</span>
						</div>
				</div>
				<div class="qiandaobox2">
						<div class="qiandaobtnbox">
								<div>
										<p>已连续签到<span class="qiandaodayNum"></span>天</p>
										<p>签到有更多惊喜哦</p>
								</div>
								<div class="btnFun"><p class="qiandaobtn" tapmode onclick="qiandaoFun()">签到</p></div>
						</div>
						<div class="qiandao">
								<div>
										<span class="jinbiniconimg"></span>
										<p>第一天</p>
								</div>
								<div>
										<span class="jinbiniconimg"></span>
										<p>第二天</p>
								</div>
								<div>
										<img class="gift" src="../../image/task/gift.png" alt="">
										<p>第三天</p>
								</div>
								<div>
										<span class="jinbiniconimg"></span>
										<p>第四天</p>
								</div>
								<div>
										<span class="jinbiniconimg"></span>
										<p>第五天</p>
								</div>
								<div>
										<span class="jinbiniconimg"></span>
										<p>第六天</p>
								</div>
								<div>
										<img class="gift" src="../../image/task/gift.png" alt="">
										<p>第七天</p>
								</div>
						</div>
				</div>
		</div>
		<ul>
			<li>
				<img src="../../image/task_icon_invite.png" alt="">
				<div class="title">
					<div>邀请新人</div>
					<div>邀请好友，好友首次下单成功</div>
				</div>
				<div class="money">
					<span>¥</span><span class="yq">10</span>
				</div>
			</li>
			<li>
				<img src="../../image/task_icon_share.png" alt="">
				<div class="title">
					<div>分享链接</div>
					<div>分享商品链接，好友点开</div>
				</div>
				<div class="money">
					<span>¥</span><span class="fx">10</span>
				</div>
			</li>
		</ul>
	</div>
	<div class="button" onclick="me_fx()">去邀请</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
	apiready = function () {
		$api.fixStatusBar($api.dom('header'));
		$api.dom('.content').style.marginTop = $api.fixStatusBar($api.dom('header')) + 15 + 'px';
		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			var frames = api.frames();
			if (frames.findIndex(item => {
				return item.name == "explain"
			}) != -1) {
				api.closeFrame({
					name: "explain"
				});
			} else {
				api.closeWin({
				});
			}
		});
		var config_info = api.getGlobalData({
				key: 'config_info'
		})
		$api.html($api.dom(".yq"), config_info.order_amount || 0)
		$api.html($api.dom(".fx"), config_info.share_amount || 0)
		// var datatime = new Date(new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000)) / 1000;
		// var dateTimeL =  (datatime - (Date.parse(new Date())/1000) + 30) * 1000;
		var startDate= config_info.date.replace(new RegExp("-","gm"),"/");
		var startDateM = (new Date(startDate)).getTime()/1000; //得到时间戳秒数
		var endDateM = (new Date(startDate).setHours(0, 0, 0, 0)) / 1000 + 86400;
		var timeEND = (endDateM - startDateM)*1000;  //结束倒计时
		setTimeout(function(){
				$api.ajax({
						url: 'api/member/info',
						method: 'get',
				}, function (ret) {
						api.setGlobalData({
								key: 'member_info',
								value: ret.data.info,
						});
				});
			 	document.getElementsByClassName('qiandaobtn')[0].style.background = "linear-gradient(#ff8375, #ff1209)"
				document.getElementsByClassName('qiandaobtn')[0].style.color = "#ffffff"
		 }, timeEND);
		// 请求任务数据
		// 金币签到等信息获取
		document.getElementsByClassName("cumulative")[0].innerText = api.getGlobalData({key: 'member_info'}).all_integral;
		document.getElementsByClassName("current")[0].innerText = api.getGlobalData({key: 'member_info'}).integral;
		document.getElementsByClassName("qiandaodayNum")[0].innerText = api.getGlobalData({key: 'member_info'}).sign_num;
		if(api.getGlobalData({key: 'member_info'}).sign_status == 1){  //已经签到过了
				document.getElementsByClassName('qiandaobtn')[0].style.background = "#efefef"
				document.getElementsByClassName('qiandaobtn')[0].style.color = "#999"
		}else{
				document.getElementsByClassName('qiandaobtn')[0].style.background = "linear-gradient(#ff8375, #ff1209)"
				document.getElementsByClassName('qiandaobtn')[0].style.color = "#ffffff"
		}
		loadDate()
	}


	// 获取任务接口数据
	function loadDate(){
		$api.ajax({
				url: 'api/task/index',
				method: 'get',
		}, function (ret, err) {
				if (ret) {
						var taskMsg = ret.data.all;
						var newtask = [];//新手任务
						var daytask = [];//日常任务
						var weektask = [];//周任务
						taskMsg.forEach(item => {
								if(item.type == 0){
										// if(item.novice){
										// 		app.newtaskNum++
										// }
										// app.newtask.push(item)
								}else if (item.type == 1) {
										// if(item.daily){
										// 		app.daytaskNum++
										// }
										// app.daytask.push(item)
								}else if (item.type == 2) {
									if(item.sort_week){
											weektask[item.sort_week-1] = item;
											if(item.sort_week == 1){
													document.getElementsByClassName('jinbiniconimg')[0].innerText =  item.integral;
											}else if (item.sort_week == 2) {
													document.getElementsByClassName('jinbiniconimg')[1].innerText =  item.integral;
											}else if (item.sort_week == 4) {
													document.getElementsByClassName('jinbiniconimg')[2].innerText =  item.integral;
											}else if (item.sort_week == 5) {
													document.getElementsByClassName('jinbiniconimg')[3].innerText =  item.integral;
											}else if (item.sort_week == 6) {
													document.getElementsByClassName('jinbiniconimg')[4].innerText =  item.integral;
											}
									}
								}
						})
				} else {
						api.alert({ msg: JSON.stringify(err) });
				}
		});
	}
	// 查看金币明细
	function mingxifun(){
			api.openTabLayout({
					name: 'GoldExChangelist',
					url: 'widget://html/me/wallet/GoldExChangelist_win.html',
					useWKWebView: true,
					bgColor: '#fff',
			})
	}

	// 签到
	function qiandaoFun(){
			if(api.getGlobalData({key: 'member_info'}).sign_status){
					 api.toast({
							 msg: '您已经签到过了',
							 duration: 2000,
							 location: 'middle'
					 });
			}else{
						$api.ajax({
								url: 'api/task/sign',
								method: 'get',
						}, function (ret,err) {
								if(ret){
									api.toast({
											msg: ret.msg,
											duration: 1500,
											location: 'middle'
									});
									$api.ajax({
											url: 'api/member/info',
											method: 'get',
									}, function (ret) {
											api.setGlobalData({
													key: 'member_info',
													value: ret.data.info,
											});
											api.sendEvent({
												name: 'exchangeMoney',
											});
											document.getElementsByClassName("cumulative")[0].innerText = api.getGlobalData({key: 'member_info'}).all_integral;
											document.getElementsByClassName("current")[0].innerText = api.getGlobalData({key: 'member_info'}).integral;
											document.getElementsByClassName("qiandaodayNum")[0].innerText = api.getGlobalData({key: 'member_info'}).sign_num;
											if(api.getGlobalData({key:'member_info'}).sign_status == 1){  //已经签到过了
													document.getElementsByClassName('qiandaobtn')[0].style.background = "#efefef"
													document.getElementsByClassName('qiandaobtn')[0].style.color = "#999"
											}else{
													document.getElementsByClassName('qiandaobtn')[0].style.background = "linear-gradient(#ff8375, #ff1209)"
													document.getElementsByClassName('qiandaobtn')[0].style.color = "#fff"
											}
									});
									document.getElementsByClassName('qiandaobtn')[0].style.background = "#efefef"
									document.getElementsByClassName('qiandaobtn')[0].style.color = "#999"
								}else{
									api.toast({
											msg: ret.msg,
											duration: 1500,
											location: 'middle'
									});
								}
					});
			}
	}

	function me_fx() {
		if (getToken()) {
			api.openFrame({
				reload: true,
				name: 'me_fx',
				url: '../me/me_fx.html',
				bgColor: "rgba(0,0,0,0)",
				animation: {
					type: "movein",
					subType: "from_bottom",
					duration: 300
				},
			});
		}
	}

	function explain() {
		api.openFrame({
			reload: true,
			name: 'explain',
			url: '../explain.html',
			bgColor: "rgba(0,0,0,0.2)",
			animation: {
				type: "none",
			},
			pageParam: {
				type: 2
			}
		});
	}

	function duihuanfun(){
			$api.ajax({
					url: 'api/member/info',
					method: 'get',
			}, function (ret) {
					api.setGlobalData({
							key: 'member_info',
							value: ret.data.info,
					});
					if(api.getGlobalData({key: 'member_info'}).integral < api.getGlobalData({key: 'member_info'}).exchange){
							api.toast({
							    msg: '金币还不够,请努力签到吧',
							    duration: 2000,
							    location: 'middle'
							});
							return
					}
					var ratio = api.getGlobalData({key: 'member_info'}).exchange;
					var goldMun = api.getGlobalData({key: 'member_info'}).integral - (api.getGlobalData({key: 'member_info'}).integral % ratio); //可以兑换金币数
					var money = goldMun/api.getGlobalData({key: 'member_info'}).proprotion;
					var dialogBox = api.require('dialogBox');
					dialogBox.alert({
					    texts: {
					        title: '您当前拥有'+  api.getGlobalData({key: 'member_info'}).integral +'金币',
					        content: '可兑换'+ money +'元钱',
					        leftBtnTitle: '暂不兑换',
					        rightBtnTitle: '立即兑换'
					    },
					    styles: {
					        bg: '#fff',
					        w: 300,
					        corner:6,
					        title: {
					            marginT: 30,
					            titleSize: 16,
					            titleColor: '#333'
					        },
					        content: {
											marginT: 10,
					            color: '#333',
					            size: 16
					        },
					        left: {
					            marginB: 15,
					            marginL: 20,
					            w: 120,
					            h: 36,
					            corner: 18,
					            bg: '#999',
											color: '#fff',
					            size: 16
					        },
					        right: {
					            marginB: 15,
					            marginL: 20,
					            w: 120,
					            h: 36,
					            corner: 18,
					            bg: '#ff4c41',
											color: '#fff',
					            size: 16
					        }
					    }
					}, function(ret) {
					    if (ret.eventType == 'left') {
					        var dialogBox = api.require('dialogBox');
					        dialogBox.close({
					            dialogName: 'alert'
					        });
					    }else{
									$api.ajax({
											url: 'api/task/exchange',
											method: 'get',
											data:{
												values:{
													num:goldMun,
												}
											}
									}, function (ret) {
											if(ret){
													var dialogBox = api.require('dialogBox');
													dialogBox.close({
															dialogName: 'alert'
													});
													api.toast({
													    msg: '兑换成功',
													    duration: 2000,
													    location: 'middle'
													});
													$api.ajax({
															url: 'api/member/info',
															method: 'get',
													}, function (ret) {
															api.setGlobalData({
																	key: 'member_info',
																	value: ret.data.info,
															});
															api.sendEvent({
																name: 'exchangeMoney',
															});
															document.getElementsByClassName("cumulative")[0].innerText = api.getGlobalData({key: 'member_info'}).all_integral;
															document.getElementsByClassName("current")[0].innerText = api.getGlobalData({key: 'member_info'}).integral;
													});
											}
									})
							}
					});
			});
	}
</script>

</html>
